import React, { useEffect, useMemo, useState } from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { ThunkDispatch } from 'redux-thunk'
import { RootState } from '../../store'
import { fethList, ListItemState, deleteList, editList } from '../../store/listReducer'
import { Table, Button, Modal, Input, Row, Col } from 'antd'
import { ExclamationCircleOutlined } from '@ant-design/icons';
const Index: React.FC = () => {
	// 获取仓库数据
	const list = useSelector((state: RootState) => state.listReducer.list)
	const role = useSelector((state: RootState) => state.userReducer.role)
	// 获取dispatch分发
	const dispatch = useDispatch()
	const [columnState, setColumnState] = useState<any[]>([])

	useEffect(() => {
		const flag = role.includes('admin');
		console.log(flag, role)
		if(flag) {
			setColumnState([...columns, {
				key: 'opration',
				title: '操作',
				render(row: ListItemState) {
					return <>
						<Button type='primary' onClick={ () => handleEdit(row) }>编辑</Button>
						<Button type="primary" danger onClick={() => handleDelete(row.key)}>删除</Button>
					</>
				}
			}])
		} else {
			setColumnState(columns)
		}
	}, [role])

	// 标题 列解构
	const columns = [{
		key: 'title',
		title: '标题',
		dataIndex: 'title'
	}, {
		key: 'desc',
		title: '描述',
		dataIndex: 'desc'
	}, {
		key: 'avator',
		title: '图片',
		dataIndex: 'avator',
		render(url: string) {
			return <img src={url}></img>
		}
	}, {
		key: 'address',
		title: '地址',
		dataIndex: 'address'
	}, {
		key: 'tel',
		title: '联系方式',
		dataIndex: 'tel'
	}]


	// 弹框相关操作
	const [visible, setVisble] = useState(false);
	const openModel = () => setVisble(true)
	const closeModel = () => setVisble(false)
	// 当前正在修改数据
	const [currModifyItem, setCurrModifyItem] = useState<ListItemState>({
		'key': '',
		'title': '',
		"desc": '',
		"tel": 0,
		"address": '',
		'avator': '',
	})

	// 点击删除
	const handleDelete = (key: string) => {
		Modal.confirm({
			title: '确认要删除该项数据吗？',
			icon: <ExclamationCircleOutlined />,
			onOk() {
				const action = deleteList(key)
				dispatch(action as any)
			},
		})
	}

	// 点击编辑
	const handleEdit = (row: ListItemState) => {
		openModel()
		setCurrModifyItem(row)
	}

	// 点击确认修改
	const onHandleEdit = () => {
		closeModel()

		// 准备修改
		const action = editList(currModifyItem)
		dispatch(action as any)
	}		


	useEffect(() => {
		const action = fethList()
		dispatch(action as any)
	}, [])

	return (
		<>
			<Table dataSource={list} columns={columnState}></Table>

			<Modal title="编辑"
				visible={visible}
				onOk={ onHandleEdit }
				onCancel={closeModel}
				okText="确认"
				cancelText="取消"
			>
				<Row style={{ margin: '10px 0' }}>
					<Col span={4}>
						标题：
					</Col>
					<Col span={16}>
						<Input value={ currModifyItem.title } onChange={ e => setCurrModifyItem({
							...currModifyItem,
							title: e.target.value
						}) }></Input>
					</Col>
				</Row>
				<Row style={{ margin: '10px 0' }}>
					<Col span={4}>
						描述：
					</Col>
					<Col span={16}>
							<Input value={ currModifyItem.desc } onChange={ e => setCurrModifyItem({
							...currModifyItem,
							desc: e.target.value
						}) }></Input>
					</Col>
				</Row>
				<Row style={{ margin: '10px 0' }}>
					<Col span={4}>
						电话：
					</Col>
					<Col span={16}>
							<Input value={ currModifyItem.tel } onChange={ e => setCurrModifyItem({
							...currModifyItem,
							tel: +e.target.value
						}) }></Input>
					</Col>
				</Row>
				<Row style={{ margin: '10px 0' }}>
					<Col span={4}>
						地址：
					</Col>
					<Col span={16}>
							<Input value={ currModifyItem.address } onChange={ e => setCurrModifyItem({
							...currModifyItem,
							address: e.target.value
						}) }></Input>
					</Col>
				</Row>
			</Modal>
		</>
	)
}

export default Index